import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom';
import { actionCreator } from '../store'

import {
  ListItem,
  ListInfo,
  LoadingMore
} from '../style'

class List extends Component {
  render() {
    const { list, page, getHomeList } = this.props
    return (
      <div>
        {
          list.map((item, index) => (
            <Link key={index} to={'/detail/' + item.get('id')}>
              <ListItem>
                <div className="wrap-img">
                  <img alt="" className="pic" src={item.get('imgUrl')} />
                </div>
                <ListInfo>
                  <h3 className="title">{item.get('title')}</h3>
                  <p className="desc">{item.get('desc')}</p>
                </ListInfo>
              </ListItem>
            </Link>
          ))
        }
        <LoadingMore onClick={() => {getHomeList(page)}}>点击更多</LoadingMore>
        
      </div>
    )
  }
  handleNav() {

  }
}

const mapState = (state) => ({
  list: state.getIn(['home', 'articleList']),
  page: state.getIn(['home', 'page'])
})

const mapDispatch = (dispatch) => ({
  getHomeList(page) {
    dispatch(actionCreator.getHomeList(page))
  }
})

export default connect(mapState, mapDispatch)(List)